<script lang="jsx">
/**
 * @author lilinjie
 * @Description:
 */

import { defineComponent, onMounted, ref } from 'vue'
import { useList } from '@/hooks/common/useList'
import { useCuModal } from '@/hooks/common/useCuModal'
import { getAllCustomers } from '@/api/customer'
import { columns } from '@/config/customer'
import { useProvideData } from '@/context/customer'
import CustomerModal from './modal.vue'
import Status from '@/components/common/status.vue'

export default defineComponent({
  name: 'Customer',
  setup() {
    // 表单部分
    const {
      filterForm,
      clearForm,
      handleSearch,
      tableData,
      pagination,
      handleCurrentChange,
      handleSizeChange
    } = useList({
      defaultFilterForm: {
        id: ''
      },
      getList: ({ onSuccess }) => {
        getAllCustomers({ ...pagination }).then(res => {
          onSuccess({
            list: res.data.list?.map((item, index) => {
              return {
               ...item,
                index: index + 1,
              }
            }),
            total: res.data.total
          })
        })
      }
    })

    // 弹窗部分
    const {
      cuFilterForm,
      modelData,
      isEdit,
      onClickClose,
      onClickConfirm,
      onClickCreate,
      onClickEdit,
      onClickView
    } = useCuModal({
      defaultCuFilterForm: {
        id: undefined,
        username: undefined,
        nickname: undefined,
        imgUrl: undefined,
        sex: undefined,
        intimacy: undefined
      }
    })

    // 提供上下文
    useProvideData({
      cuFilterForm,
      modelData,
      isEdit,
      onClickClose,
      onClickConfirm,
      onClickCreate,
      onClickEdit,
      onClickView
    })

    onMounted(() => {
      handleSearch()
    })

    const statusMap = {
      0: '离线',
      1: '在线',
      2: '浏览商品',
      3: '刷视频'
    }

    return () => {
      const tableSlot = {
        bodyCell: ({ text, record, index, column }) => {
          if (column.dataIndex === 'status') {
            return <span class={`status-${record.status}`}>{statusMap[record.status]}</span>
          }
          if (column.dataIndex === 'action') {
            return <a-space>
              <a-button type="link" size="small" onClick={() => onClickView({ ...record, id: record.userId })}>
                查看
              </a-button>
            </a-space>
          }

          if (column.dataIndex === 'status') {
            // console.log(record)
            return <Status status={record.status} />
          }

          if (column.dataIndex === 'imgUrl') {
            return <a href={text} target="_blank" class="img-box">
              <img src={text} class="img" />
              <span class="img-text">{text}</span>
            </a>
          }

          if (column.dataIndex === 'intimacy') {
            return <span>
              <a-progress percent={record.intimacy / 10} type="circle" size="small" format={(percent) => percent} />
            </span>
          }
        }
      }

      return (
          <div class="product">
            <div class="header">
              <a-form class="form" layout="inline">
              </a-form>
            </div>
            <a-table class="table"
                     columns={columns}
                     dataSource={tableData?.data.list}
                     v-slots={tableSlot}
            />
            <CustomerModal />
          </div>
      )
    }
  }
})
</script>

<style lang="less" scoped>
@import '@/assets/less/common-style.less';

.product {
  .header {
    .flex(space-between);

    .ant-btn-primary {
      margin-right: 50px;
    }
  }

  .table {
    padding: 0 24px;
    height: calc(100vh - @nav-bar-height - 60px);
    overflow: auto;
  }

  .form {
    margin: 20px 50px;
  }
}

.img-box {
  .common-img-box();
}

.status-0,
.status-1,
.status-2,
.status-3 {
  display: inline-block;
  //width: 100px;
  //height: 20px;
  line-height: 20px;
  padding: 2px 10px;
  text-align: center;
  border-radius: 8px;
  //background-color: #4caf50;
  color: #fff;
  font-size: 12px;
}

.status-1 {
  background-color: #4caf50;
}

.status-2 {
  background-color: #2196f3;
}

.status-3 {
  background-color: #ff9800;
}

.status-0 {
  background-color: gray;
}
</style>
